<template>
    <div>
        <input type="text" placeholder="请输入" @keydown.enter.space="onEnter">
        <input type="text" placeholder="请输入" @keydown.enter.once="onEnter">
    </div>
    <a href="https://baidu.com" @click.prevent>百度一下</a>
    <br/>
    <input type="text" v-model.trim="obj.name">
    <input type="text" v-model.trim.number="obj.price">

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <!-- 文本域 -->
    <textarea placeholder="请输入自我介绍" v-model="intro"></textarea>
    <br/>
    <!-- 下拉菜单 -->
    <select v-model.trim="todo">
        <option value="CF">吃饭</option>
        <option value="SJ">睡觉</option>
        <option value="DDD">打豆豆</option>
    </select>
    <br/>
    <!-- 单选框 -->
    <input type="radio" value="a" v-model="blood">A
    <input type="radio" value="b" v-model="blood">B
    <input type="radio" value="o" v-model="blood">O
    <br/>
    <!-- 复选框(one) -->
    <input type="checkbox" v-model="isAgree">是否同意协议
    <br/>
    <!-- 复选框(lot) -->
    <input type="checkbox" value="b" v-model="colors">黑色
    <input type="checkbox" value="w" v-model="colors">白色
    <input type="checkbox" value="r" v-model="colors">红色
    <input type="checkbox" value="p" v-model="colors">紫色




</template>
<script setup>
    import { reactive, ref } from 'vue';
    const onEnter = () => {
        console.log('onEnter')
    }

    const obj = reactive({
        name: "  wqe  ",
        price: 12
    })

    const intro = ref('')

    const todo = ref('')

    const blood = ref('o')

    const isAgree = ref(true)

    const colors = ref([])
</script>

<style scoped>

</style>